<template>
	<div class="block">
		<div class="divblock"><label class="textblock">姓名</label><el-input class="inputblock" placeholder="请填写姓名" v-model="member.nickname"></el-input></div>
		<div class="divblock"><label class="textblock">出生日期</label><el-date-picker v-model="birthdayStr"
				align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-picker></div>
		<div class="divblock"><label class="textblock">职业</label><el-input class="inputblock" placeholder="请填写职业" v-model="member.profession"></el-input></div>
		<div class="divblock"><label class="textblock">学历</label><el-input class="inputblock" placeholder="请填写学历" v-model="member.education"></el-input></div>
		<div class="divblock"><label class="textblock">身高</label><el-input class="inputblock" type="number" placeholder="请填写身高" v-model="member.height"></el-input></div>
		<div class="divblock"><label class="textblock">体重</label><el-input class="inputblock" type="number" placeholder="请填写体重" v-model="member.weight"></el-input></div>
		<div class="divblock"><label class="textblock">籍贯</label><el-input class="inputblock" placeholder="请填写籍贯" v-model="member.origin"></el-input></div>
		<div class="divblock"><label class="textblock">现居住地</label><el-cascader style="width: 420px;" size="large" :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>
			<label class="textblock">详细地址</label><el-input class="inputblock" placeholder="请填写现居住地" v-model="member.address"></el-input></div>
		<div class="divblock"><label class="textblock">单位</label><el-input class="inputblock" placeholder="请填写单位" v-model="member.company"></el-input></div>
		<div class="divblock"><label class="textblock">联系电话</label><el-input class="inputblock" type="number" placeholder="请填写联系电话" v-model="member.phone"></el-input></div>
		<div class="divblock"><label class="textblock">月收入</label><el-input class="inputblock" type="number" placeholder="请填写月收入" v-model="member.income"></el-input></div>
		<div class="divblock"><label class="textblock">是否购车房</label><el-input class="inputblock" placeholder="请填写是否购车房" v-model="member.ifcar"></el-input></div>
		<div class="divblock"><label class="textblock">家庭成员情况</label><el-input class="inputblock" placeholder="请填写家庭成员情况" v-model="member.homeman"></el-input></div>
		<div class="divblock"><label class="textblock">个人兴趣爱好</label><el-input class="inputblock" placeholder="请填写个人兴趣爱好" v-model="member.interest"></el-input></div>
		<div class="divblock"><label class="textblock">择偶标准</label><el-input class="inputblock" placeholder="请填写择偶标准" v-model="member.standard"></el-input></div>
		<div class="submit"><button class="submitButton" @click="submitData">提交信息</button></div>
	</div>
</template>

<script>
	import { regionDataPlus } from 'element-china-area-data'
	import https from '../https'

	export default {
		name: 'members',
		data(){
			return{
				member: {
					nickname: '',
					birthdayStr: '',
					profession: '',
					education: '',
					height: '',
					weight: '',
					origin: '',
					address: '',
					company: '',
					phone: '',
					income: '',
					ifcar: '',
					homeman: '',
					interest: '',
					standard: ''
				},
				birthdayStr: '',
				options: regionDataPlus,
				selectedOptions: [],
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				}
			}
		},
		methods: {
			handleChange (value) {
				console.log(value)
			},
			submitData(){
				https.fetchPost(this.serverUrl + 'member/saveMember', this.member)
				.then((data) => {
					if (data.data.resultCode === '0') {
						this.$message({
							message: '恭喜你，信息保存成功!',
							type: 'success'
						})
					}else {
						this.$message.error('保存失败，请稍后重试...');
					}
				}).catch((err) => {
					console.log(err)
					this.$message.error('服务器异常，请稍后重试...');
				})
			}
		}
	}
</script>

<style>
	.block{
		display: flex;
		flex-direction: column;
	}
	.divblock{
		display: flex;
		flex-direction: row;
		margin-top: 10px;
	}
	.textblock{
		width: 8%;
		flex-shrink: 0;
		align-self: center;
	}
	.submit{
		padding-top: 10px;
		text-align: center;
	}
	.submitButton{
		height: 30px;
		width: 100px;
		background-color: dimgrey;
		color: white;
	}
</style>
